<template>
  <div class="home">
    <h1>气候性传染病实时监测系统</h1>
    <div class="box">
      <div class="box1">欢迎登陆</div>
      <div class="box2">
        <el-form :model="admin">
          <el-form-item>
            <el-input v-model="admin.username" prefix-icon="el-icon-user" class="box3" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="admin.password" prefix-icon="el-icon-lock" class="box3" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button class="box4" type="primary" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import request from '../utils/request'
import axios from 'axios'

export default {
  name: "HomePage",
  data() {
    return {
      admin: {},

    };
  },
  methods: {
    login() {
      this.admin.province = this.selectedPro
      axios({
        method: 'post',
        url: '/user/login',
        data: this.admin
      }).then(
        response => {
          if (response.data.code == 1) {
            console.log('登陆成功')
            this.$router.push({
              path: '/real-time'
            })
          } else {
            console.log(response.data.msg)
            alert(response.data.msg)
          }
        },
        error => {
          console.log('错误信息：', error.message)
          alert(response.data.msg)
        }
      )
    }
  },
};
</script>
<style scoped>
/*引入自定义动画库 animate.css*/
@import "../common/animate.min.css";

.home{
  background: url(../../public/image/back4.jpg);
  width: 1920px;
  height: 1020px;
  background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 60px;
}
h1 {
    width: 100%;
    height: 80px;
    line-height: 80px;
    /* 使文本垂直居中 */
    color: white;
    /* 文字颜色为白色 */
    margin: 0;
    /* 移除默认的 margin */
    text-align: center;
    /* 文本水平居中 */
    font-family: "楷体", KaiTi, STKaiti, KaiTi_GB2312, Kai;
    font-size: 65px;
    margin-top: 175px;

}
.box {
  width: 520px;
  height: 420px;
  margin: 80px auto;
  background: inherit;
  overflow: hidden;
  /* 隐藏多余的模糊效果*/
  /* 设置边框 */
  border: 1px solid white;
  border-radius: 20px;
  /* 设置动画效果 */
  animation: bounceInDown 2s;
  font-family: "楷体";
}

.box1 {
  width: 100%;
  height: 100px;
  /* 将字体设置为中心 */
  line-height: 100px;
  text-align: center;
  color: #4a5ed0;
  font-size: 30px;
}

.box2 {
  margin-top: 25px;
  text-align: center;
}

.box3 {
  display: block;
  width: 300px;
  margin: 5px auto;
  /* border: 1px solid white;
  border-radius: 20px; */
}

.box4 {
  display: block;
  margin: 5px auto;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
